<template>
	<view class="content">
		<u-navbar back-text="返回" :is-back="true" title="自定义导航栏">
			<!--<view class="slot-wrap" style="background: red;display: flex;align-items: center;width: 100%;flex: 1;padding: 0 30rpx;">
						自定义内容
			</view>-->
		</u-navbar>
		<view class="show_main" v-if="show_main">
			<image class="logo" :src="image"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
			<view @click="getPage($event)" data-uri="/pages/xxxx/xxxx" data-type="0">跳转设置</view>
			<view style="height: 10px;;"></view>
			<u-button type="primary" @click="showNotiry($event)">测试通知</u-button>
			<view style="height: 10px;;">{{$vuex.state.globalData.tabBar.list}}</view>
			<u-icon name="file-text"></u-icon>
			<!--表单-->
			<form @submit="submit">
				<view class="form-list mt80">
					<!--<view class="top b">手机号 <text class="colf00">*</text></view>-->
						<input type="text" @input="setMobile($event)" :value="user_mobile" name="user_mobile" placeholder="*请输入手机号" placeholder-style="color: #8f8f8f;" />
					</view>
					<!-- form-list -->
					
					<view class="form-list mt60 pr">
						<!--<view class="top b">手机号 <text class="colf00">*</text></view>-->
						<input type="text" name="code" placeholder="*手机验证码" placeholder-style="color: #8f8f8f;" />
						<view @click="sendCode" class="mobile_code">{{sowCodeText}}</view>
					</view>
					<!-- form-list -->
					<view class="form-list mt40">
						<button form-type="submit" class="my_submit" style="height: 90rpx;line-height: 90rpx;background: #01b9b7;">立即注册</button>
					</view>
			</form>
			<!--表单结束-->
		</view>
		<loading :loading="not_load"/><!--加载状态-->
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		<check-network /><!--检测网络-->
		<notify :show="isNotify" :message="message" path="/pages/index/index"/><!--顶部通知-->
		<u-tabbar v-model="$vuex.state.globalData.tabBar.current" :list="$vuex.state.globalData.tabBar.list" active-color="#01b9b7" :mid-button="false"></u-tabbar><!--自定义底部导航-->
	</view>
</template>

<script setup>
import {downloadFile,getFileInfo,deleteDocFile} from '@/utils/_docFile.js';
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const not_load=ref(false);
const page_load=ref(false); 
const next_page=ref(null);
const list=ref([]);
const title=ref('');
const user_mobile=ref(null);
const sowCodeText=ref('');
const isNotify=ref(true);
const message=ref({name:1,age:33});
const image=ref('/static/logo.png');
//页面加载时
onLoad(async (options)=>{
    //返回上一页
	//uni.navigateBack({data:1});
	//改变模板值
	title.value='测试标题';
	console.log('语法糖onLoad');
	//动态改变APP标题
	uni.setNavigationBarTitle({ title: '任务大厅' });
	//获取vuex全局变量
	//uni.$vuex.state.globalData.test=55555; //改变值
	console.log(uni.$vuex.state.globalData.test);//获取值
	//调用工具函数
	uni.$utils.showToast(1111);
	//加载页面数据
	loadPage(options,false);
	//获取用户设置
	let info=await uni.$utils.getSystemInfo();
	console.log(info);
	//获取用户位置
	//let location=await uni.$utils.getLocation();
	//console.log(location,2);
	//动态改变导航未读数
	setTimeout(()=>{
		uni.$vuex.state.globalData.tabBar.list[1].count+=10;
	},5000);
	//同步获取用户设备
	console.log(uni.getDeviceInfo());
	//同步获取用户操作平台
	console.log(uni.getDeviceInfo().platform);
	//同步获取用户系统操作平台：
	console.log(uni.getDeviceInfo().osVersion);
	
	//下载文件到本地
	//https://task.fsshihui.com/static/common/images/ABC-NET-B2C.png
	//https://task.fsshihui.com/2025.01.23.142047.apk
	//downloadFile(3210,'https://task.fsshihui.com/2025.01.23.142047.apk');
	//image.value='_doc/uniapp_save/17397556263330.png' 
	
	//读取文件是否存在
	//let file=await getFileInfo('_doc/uniapp_save/17397583587930.apk');
	//console.log(file);
	
	//删除_doc保存本地的文件
	//let del = await deleteDocFile('_doc/uniapp_save/17397590775070.apk'); 
	//console.log(del);
	
	
});
//页面显示时执行
onShow(()=>{
	console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	console.log('语法糖onHide');
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
//下拉更新
onPullDownRefresh(()=>{
	console.log('onPullDownRefresh');
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
async function loadPage(options,isPage){
	let ret = await uni.$get('index/index',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	show_main.value=true;
	not_load.value=true;
	page_load.value=false;
	next_page.value=ret.data.next_page;
	let listData=ret.data.list;
	if(isPage) listData=list.value.concat(listData);
	list.value=listData;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(e){
	uni.$utils.dataSetPage(e);
};
//测试点击事件函数
function clickTest(e){
	console.log(e);
}
//收集输入内容
function setMobile(event){
	let value=event.detail.value;
	user_mobile.value=value;
	console.log(user_mobile.value);
}
//发送手机号
async function sendCode(){
	
}
//提交表单
async function submit(e){
	let form=e.detail.value;
	console.log(form);
}
const showNotiry=($event)=>{
	isNotify.value =isNotify.value ? false : true;
	//console.log($event);
}
</script>

<style  lang="scss">
	page{background: #fff;}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
